<template>
	<div class="page page-stadium-detail has-headbar">
		<head-bar :title="$route.meta.title" />
		<van-cell-group>
			<van-cell class="cell-face" is-link title="头像" value="头像图片">
				<van-uploader :after-read="onRead" accept="image/gif, image/jpeg, image/jpg">
					<img class="face" :src="avatarImage || require('@/assets/images/avatar.png')">
				</van-uploader>
			</van-cell>
			 <van-field label="昵称" is-link @input="nameInputEvent" :value="name" placeholder="请输入昵称" />
			<van-cell title="性别" is-link :value="sexName" @click="selectGenderEvent" />
		</van-cell-group>
		<van-cell-group>
			<van-cell title="出生年月" is-link :value="birthday || '请选择生日'" @click="selectBirthday" />
			<van-cell title="联系方式" is-link :value="phone || '请绑定手机号'" :to="{name: 'change-phone'}"/>
			<van-cell title="所属区域" :value="address"/>
		</van-cell-group>
		<van-button class="submit-btn" :disabled="loading" :loading="loading" type="warning" size="large" v-if="changeState" @click="saveData">保存</van-button>
    <!-- 性别选择 -->
		<van-actionsheet
			v-model="genderShow"
			:actions="genderActions"
			@select="onGenderSelect"
		/>
    <van-popup v-model="birthdayShow" position="bottom">
      <!-- 生日选择 -->
      <van-datetime-picker
        title="选择生日"
        :value="birthdayValue"
        type="date"
        :min-date="minDate"
        :max-date="new Date()"
        :formatter="formatter"
        @confirm="datatimePickEvent"
        @cancel="datetimeCancelEvent"
      />
    </van-popup>
	</div>
</template>

<script>
import { API_USERINFO, API_UPLOAD_AVATAR, API_UPDATE_USERINFO } from '@/service/user'
import { Uploader, Actionsheet, DatetimePicker, Popup } from 'vant'
import dayjs from 'dayjs'
import { GENDER } from '@/libs/config'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  name: 'user-information',
  components: {
    [Uploader.name]: Uploader,
    [Actionsheet.name]: Actionsheet,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup
  },
  data () {
    return {
      avatar: '',
      avatarImage: '',
      name: '',
      sex: null,
      sexName: '',
      birthday: '',
      // birthdayValue: null,
      phone: '',
      country: '',
      province: '',
      city: '',
      GENDER,
      changeState: false,
      loading: false,
      genderShow: false,
      birthdayShow: false,
      minDate: new Date(1900, 1, 1)
    }
  },
  computed: {
    genderActions () {
      let actions = []
      for (let [k, v] of GENDER.entries()) {
        actions.push({ name: v, value: k, className: GENDER.get(this.sex) === v ? 'action-item-selected' : '' })
      }
      return actions
    },
    address () {
      let address = ''
      if (!this.province || this.province === 'null') {
        address = '未知'
      } else {
        address = `${this.province && this.province !== 'null' ? this.province : ''} ${this.city && this.city !== 'null' ? this.city : ''}`
      }

      return address
    },
    birthdayValue () {
      return this.birthday ? dayjs(this.birthday).toDate() : new Date()
    }
  },
  mounted () {
    this.wechatHideMenu()
    this.requestData()
  },
  methods: {
    requestData () {
      API_USERINFO().then((resData) => {
        let { headImageUrl, headImageShowUrl, nickName, sex, birthDate, phone, country, province, city } = resData.info
        this.avatar = headImageUrl
        this.avatarImage = headImageShowUrl
        this.name = nickName
        this.sex = sex
        this.birthday = birthDate
        this.phone = phone != '-1' && phone ? phone : ''
        this.country = country
        this.province = province
        this.city = city
        this.sexName = GENDER.get(sex) || ''
        // this.birthdayValue = dayjs(birthDate).toDate() || new Date()
      })
    },
    saveData () {
      this.loading = true
      let reqData = {
        headImg: this.avatar,
        nickName: this.name,
        sex: this.sex,
        birthDate: this.birthday,
        phone: this.phone,
        province: this.province,
        city: this.city,
        country: this.country
      }
      API_UPDATE_USERINFO(reqData).then((resData) => {
        this.changeState = false
        this.$toast('修改成功')
      }).finally(() => {
        this.loading = false
      })
    },
    // 头像
    onRead ({ file }) {
      API_UPLOAD_AVATAR(file).then((resData) => {
      	this.changeState = true
        this.avatar = resData.url
        this.avatarImage = resData.showUrl
        let userInfo = { ...this.$store.getters.getUserInfo }
        userInfo.headImagerUrl = resData.showUrl
        this.$store.dispatch('saveUserInfo', userInfo)
      })
    },
    // 姓名
    nameInputEvent (value) {
      this.changeState = true
      this.name = value
    },
    // 性别
    onGenderSelect (item) {
      if (item.value !== this.sex) {
        this.changeState = true
        this.sex = item.value
        this.sexName = GENDER.get(item.value)
      }
      this.genderShow = false
    },
    selectGenderEvent () {
      this.genderShow = true
    },
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    selectBirthday () {
      this.birthdayShow = true
    },
    datatimePickEvent (value) {
      // this.birthdayValue = value
      let selectDate = dayjs(value).format('YYYY-MM-DD')
      if (selectDate !== this.birthday) {
        this.birthday = dayjs(value).format('YYYY-MM-DD')
        this.changeState = true
      }
      this.birthdayShow = false
    },
    datetimeCancelEvent () {
      this.birthdayShow = false
    }
  }
}
</script>

<style lang="less" scoped>
	.cell-face{
		@sz:106px/2;
		/deep/ .van-icon, /deep/ .van-cell__title, /deep/ .van-cell__value{line-height:@sz;height:@sz;}
		.face{
      width:@sz;
      height:@sz;
      border-radius: 50%;
		}
	}
	/deep/ .van-cell__value{color:#9E9E9E;}
	/deep/ .van-field__control {
		text-align: right;
  }
  /deep/ .action-item-selected{
    color: @colorPrimary;
  }
	.submit-btn{
		display: block;
		margin: 50px auto;
    width: 88%;
    height: 40px;
    line-height: 40px;
	}
</style>
